import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import Breadcrumb from "../components/Breadcrumb";
import Footer from "../components/Footer";
import Header from "../components/Header";
import service from "../service";

export default function Product(props) {
  let path = [
    { name: "首页", href: "/" },
    { name: "产品中心", href: "/product?type=1" },
    { name: "商品详情", href: "/product_details" },
  ];
  // 商品详情
  let [pd, setPd] = useState({});
  let [params, steParams] = useSearchParams();
  let pid = params.get("pid");
  // 跳转到购物车
  let nav = useNavigate();
  useEffect(function () {
    service
      .productDetail(pid)
      .then((data) => {
        setPd(data);
        console.log(data);
      })
      .catch((err) => console.log(err));
  }, []);
  function goCart() {
    if (!sessionStorage["userName"]) {
      nav("/login");
    } else {
      nav("/cart");
    }
  }
  return (
    <>
      {/* header */}
      <div className="header_box">
        <Header></Header>
      </div>
      {/* 面包屑 */}
      <Breadcrumb path={path}></Breadcrumb>
      {/* main */}
      <div className="main container">
        <div className="pd_info clearfloat">
          <div className="pdinfo_img">
            <img src={pd.pic} alt="" />
          </div>
          <div className="pdinfo_text">
            <h2></h2>
            <ul>
              <li>{pd.title1}</li>
              <li>功能：{pd.func}</li>
              <li>噪音：{pd.noise}</li>
              <li>风量：{pd.wind}</li>
              <li>适用对象：{pd.applyTo}</li>
              <li>适用面积：{pd.size}</li>
              <li>空气净化能效等级：{pd.level}</li>
            </ul>
            <p>
              价格：<span>{pd.price}</span>
              <strong id="price"></strong>
            </p>
            <a href="" id="addCart" onClick={goCart}>
              <span className="icon_cart"></span>加入购物车
            </a>
          </div>
        </div>
        <div className="details_box">
          <h2 className="title">产品详情</h2>
          <div
            className="pd_details"
            dangerouslySetInnerHTML={{ __html: pd.detail }}
          ></div>
        </div>
      </div>
      {/* footer */}
      <footer className="footer">
        <Footer></Footer>
      </footer>
    </>
  );
}
